<template>
	<view>

		<u-toast ref="uToast"></u-toast><!-- 弹窗 -->

		<view class="flow-sticky">

			<!-- 自定义标题  -->
			<u-navbar :is-back="true" :custom-back="goBack">
				<view style="font-size:18px;font-weight: bold;margin:0px auto">{{title != '' ? title : reviewEditTitle}}</view>
			</u-navbar>

			<!-- 标签 这里的name指向的是tabs里的name,因为数据可能是后端给到的，例如 name='cate_name' tabs:[{cate_name:'表单信息'}]-->
			<u-tabs name="name" :list="tabs" :is-scroll="false" :current="current" @change="tabsChange" bar-width="60"
				bar-height="6"></u-tabs>

			<!-- 状态信息 @click="handleShowSelect()"-->
			<div class="flow-urgent-value" :style="{'background-color':flowUrgentList[selectflowUrgent.extra].bgColor}">
				<span :style="{'color':flowUrgentList[selectflowUrgent.extra].color}">{{selectflowUrgent.label}}</span>
			</div>
		</view>

		<!-- 只有等待审核、审核通过、审核驳回有流程信息、流转记录 -->
		<block v-show="status == 1 || status == 2 || status == 3 ">
			<view v-show="tabsName === '表单信息'">
				<!-- 引用其他页面可以给其他页面加属性props传值，并且其他页面的接口要在mounted挂载里才能调用 -->
				<reviewedit ref='reviewedit' :reviewDetailId='id' :reviewDetailType='reviewDetailType'
					:reviewDetailStatus='status' :reviewDetailinstype='instype'  @getData='getData'></reviewedit>
			</view>

			<view class="nodeList-v" v-show="tabsName === '流程信息'">
				<steps :options="stepList" />
			</view>

			<view class="record-v" v-show="tabsName === '流转记录'">
				<records :options="recordList" :endTime="endTime" />
			</view>

		</block>

	</view>
</template>

<script>
	import {
		FlowBeforeInfo,
	} from '@/api/workFlow/flowBefore' // 接口
	import reviewedit from '../unqualifiedreview/reviewedit.vue'
	import steps from '@/pages/workFlow/components/steps.vue' // steps的字段要与接口传回来的一致,数据不对要检查
	import records from '@/pages/workFlow/components/records.vue'
	export default {
		components: {
			reviewedit,
			steps,
			records
		},
		data() {
			return {
				title: '', // 标题
				reviewEditTitle: '', // 当没有流程时标题为编号
				tabs: [{
					name: '表单信息'
				}, {
					name: '流程信息'
				}, {
					name: '流转记录',
				}],
				selectflowUrgent: {
					extra: '0',
					label: '普通',
					value: 1,
				},
				flowTaskInfo: {},
				flowUrgentList: [{
						label: '普通',
						color: '#409EFF',
						bgColor: '#e5f3fe',
						value: 1,
						extra: '0'
					},
					{
						label: '重要',
						color: '#E6A23C',
						bgColor: '#fef6e5',
						value: 2,
						extra: '1'
					},
					{
						label: '紧急',
						color: '#F56C6C',
						bgColor: '#fee5e5',
						value: 3,
						extra: '2'
					},
				],
				tabsTemporary: [],
				current: 0, // 默认激活的标签
				tabsName: '表单信息', // 默认激活标签名称
				stepList: [], // 流程信息
				recordList: [], // 流转记录
				endTime: 0,
				id: '', // 检验批id
				status: '', // 有无流程
				reviewDetailType: 'detail', // edit 编辑 detail 详情
				instype:'',
				
			}
		},
		onLoad(e) {
			
			this.id = e.id; // 获取id
			this.status = e.status;// 根据状态不显示标签
			this.instype = e.instype
			
			// 等待审核 、审核通过 、审核驳回
			if (this.status == 1 || this.status == 2 || this.status == 3) {
				this.init(); // 初始化流程
			}  else {
				this.tabs = [];
			}
		},

		methods: {

			getData(data) {
				this.reviewEditTitle = data.Code; // 没有流程时的标题
			},

			init() {
			
				FlowBeforeInfo(this.id).then(res => {
					if (res.code == 200) {
						this.stepList = res.data.flowTaskNodeList; // 流程信息
						this.recordList = res.data.flowTaskOperatorRecordList; // 流转记录
						this.endTime = res.data.flowTaskInfo.completion == 100 ? res.data.flowTaskInfo.endTime : 0;

						// 状态
						this.flowTaskInfo = res.data.flowTaskInfo;
						// 返回需要的obj对象
						const getSelectInfo = () => {
							var obj = {
								value: this.flowTaskInfo.flowUrgent,
								extra: '',
								label: ''
							}
							this.flowUrgentList.forEach((e, i) => {
								if (e.value == this.flowTaskInfo.flowUrgent) {
									obj.extra = i
									obj.label = e.label
								}
							})
							return obj;
						}
						this.selectflowUrgent = getSelectInfo()
						this.title = this.flowTaskInfo.fullName
						if (this.flowTaskInfo.status !== 0 && this.flowTaskInfo.status !== 3) {
							this.title = this.flowTaskInfo.thisStep ? this.flowTaskInfo.fullName + '/' + this
								.flowTaskInfo
								.thisStep : this.flowTaskInfo.fullName
						}
					}

				}).catch((err) => {
					console.log('调试接口异常:' + err)
				});
			},

			tabsChange(index) {
				this.current = index;
				this.tabsName = this.tabs[index].name;

			},
			// 导航栏返回
			goBack() {
				uni.navigateBack({
					url: '/pages/q1/business/unqualifiedreview/index'
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}

	.nodeList-v,
	.record-v {
		padding: 32rpx 32rpx 10rpx;
		background-color: #fff;
	}

	// 不随滚动条滚动
	.flow-sticky {
		position: sticky;
		top: var(--window-top);
		z-index: 200;
	}

	.flow-urgent-value {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		font-size: 28rpx;
	}
</style>

//测试
//stepList: [{
//nodeCode:'1',
//nodeName:'开始',
//userName: "管理员/admin",
//type: "0", // 0绿色 1蓝色 其它灰色
//}, {
//nodeCode:'2',
//nodeName: 'SQE确认',
//userName: "管理员/admin",
//type: "1",
//}, {
//nodeCode:'3',
//nodeName: 'MQE确认',
//userName: "管理员/admin",
//type: null,
//}, {

//nodeCode:'end',
//nodeName: '结束',
//userName: "管理员/admin",
//type: null,
//}],


//测试
//recordList:[{
//handleStatus:2,
//userName:"管理员/admin",
//handleTime:1692780866000
//}],